// 文档加载事件
window.addEventListener('DOMContentLoaded', function () {
    //功能一: 轮播图
    new Swiper('.banner', {
        //direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })

    //功能二: 动态渲染页面数据-模拟真实接口数据操作

    /*
        步骤:
            1.定义数据源---使用模拟数据,相当于后端返给前端的数据
            2.遍历拼接html结构,并添加到指定位置
    
    */

    //1.定义数据源
    let sData = [
        {
            imgUrl: './imgs/service01.svg',
            title: 'API私有化服务',
            info: '可部署本地&专有云的Web API'
        },
        {
            imgUrl: './imgs/service02.svg',
            title: '源码云监测',
            info: '实时代码托管、威胁情报监控'
        },
        {
            imgUrl: './imgs/service03.svg',
            title: '源码有赢',
            info: '一站式营销活动服务平台'
        },
        {
            imgUrl: './imgs/service04.svg',
            title: 'YuanMa API',
            info: 'API开发者协作平台'
        }
    ];

    //2.遍历拼接html结构,并添加到指定位置
    sData.forEach(function (v) {
        getEle('#serviceList').innerHTML += `
        <li>
            <img src="${v.imgUrl}" alt="">
            <h2 class="f22 c18 plr20 lh34">${v.title}</h2>
            <p class="c6 plr20 f12 lh26">${v.info}</p>
            <a href="#" class="c127 f12 iblock plr20 mt15">去搜索</a>
        </li>`
    })

    //功能三: api分类 动态渲染页面数据
    //1.定义数据源
    let apiData = [
        {
            imgUrl: './imgs/api01.svg',
            title: '生活服务'
        },
        {
            imgUrl: './imgs/api02.svg',
            title: '金融科技'
        },
        {
            imgUrl: './imgs/api03.svg',
            title: '交通地理'
        },
        {
            imgUrl: './imgs/api04.svg',
            title: '充值缴费'
        },
        {
            imgUrl: './imgs/api05.svg',
            title: '数据智能'
        },
        {
            imgUrl: './imgs/api06.svg',
            title: '企业工商'
        },
        {
            imgUrl: './imgs/api07.svg',
            title: '应用开发'
        },
        {
            imgUrl: './imgs/api08.svg',
            title: '电子商务'
        },
        {
            imgUrl: './imgs/apic1.svg',
            title: '吃喝玩乐'
        },
        {
            imgUrl: './imgs/apic2.svg',
            title: '文娱视频'
        }
    ];

    //2.遍历拼接html结构,并添加到指定位置
    apiData.forEach(function (v) {
        getEle('#apiList').innerHTML += `
        <li>
            <img src="${v.imgUrl}" alt="" class="mt35">
            <p class="mt15">${v.title}</p>
        </li>`
    })


    //功能四: api分类特效

    //批量给li添加移入和移出事件
    getEles('#apiList li').forEach(function (v) {
        //定义变量保存老图像地址
        let imgOldUrl = '';//http://127.0.0.1:5500/imgs/api01.svg
        //移入事件
        v.addEventListener('mouseover', function () {
            //给当前li添加背景和文本白色
            v.style = `
                background-color:#2f7ee9;
                color:#fff;
            `;

            /*
            换图像步骤
                1.获取图像地址
                2.处理图像地址
                3.把处理后的地址设置到img上
            
            */
            //1.获取图像地址  http://127.0.0.1:5500/imgs/api01.svg
            //console.log(v.firstElementChild.src);
            imgOldUrl = v.firstElementChild.src;

            //2.处理图像地址 http://127.0.0.1:5500/imgs/api01-c.svg
            //替换方式
            // console.log(imgOldUrl.replace('.svg','-c.svg'));
            // 3.把处理后的地址设置到img上
            v.firstElementChild.src = imgOldUrl.replace('.svg', '-c.svg');
        })

        //移出事件
        v.addEventListener('mouseout', function () {
            //给当前li背景和文本白色去掉
            v.style = ``;
            //把之前的图像地址还原回去
            v.firstElementChild.src = imgOldUrl;
        })
    })

    let itemBox = document.querySelectorAll('#unicon .items');
    console.log(itemBox);
    //2.定义全局索引
    let index = 0;
    //3.默认动态绑定第一个盒子显示
    itemBox[index].style.display = 'block';
    //4.使用定时器来设置间隔时间显示下一个例子
    // window.setInterval(function () {
    //     //把所有itemBox上的样式先干掉
    //     itemBox.forEach(function (v) {
    //         v.style.display = 'none';
    //     })


    //     //给当前items显示
    //     itemBox[index].style.display = 'block';
    //     index++;

    //     //判定 如果是最后一个,拉到第一个盒子
    //     if (index == itemBox.length) {
    //         index = 0;
    //     }
    // }, 1000);
    setInterval(function () {
        index++;
        /* 让前面图片隐藏 */
        itemBox[index - 1].style.display = 'none';
        /* 判断如果大于盒子索引的长度的时候，回到第一张 */
        if (index >= itemBox.length) {
            index = 0;
        }
        itemBox[index].style.display = 'block';
    }, 1000)
})

































